<template>
	<view class="main">
		<view class="topArea">
			<view class="topArea_tit">{{detail.item_name}}</view>
			<view class="codeArea">
				<tki-qrcode style="width: 360rpx;height: 360rpx;" v-if="codeShow"
				    ref="qrcode"
				    :val="detail.customer_item_num"
				    :size="360"
				    :background="'#ffffff'"
				    :foreground="'#000000'"
				    :loadMake="true" />
			</view>
			<!-- <view class="codeNum">{{detail.customer_item_num}}</view> -->
			<view class="codeNum">
				<text>{{a}}</text>
				<text>{{b}}</text>
				<text>{{c}}</text>
			</view>
		</view>
		<view class="middleArea">
			<view class="middleLeft">
				<view class="kf_key">客服电话</view>
				<view class="kf_value">0519-8119-0919</view>
			</view>
			<view class="middleRight">
				<image src="../../static/my/callIcon.png" mode="widthFix" @click="call"></image>
			</view>
		</view>
		<view class="bottomArea">
			<text>截止日期</text>
			<text>{{detail.customer_item_riqi}}</text>
		</view>
		
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		data() {
			return {
				item_id:"6a7d8420-016e-47b1-92b6-582839d3036e",
				detail:{},
				codeShow:false,
				a:'',
				b:'',
				c:''
			}
		},
		components: {
			tkiQrcode
		},
		onLoad(option) {
			this.item_id = option.id;
			this.getDetail();
			setInterval(()=>{
				this.getType();
			},1500)
		},
		methods: {
			call(){
				uni.makePhoneCall({
				    phoneNumber: "0519-8119-0919" 
				});
			},
			//生成二维码
			getDetail() {
				this.$get('customer_item_hexiao.ashx', {
					customer_item_id: this.item_id,
				}, (res) => {
					console.log(res)
					if (res.data == 4) {
						uni.navigateTo({
							url:'/pages/comment/comment?id='+this.item_id
						})
					}else{
						this.detail = res.data[0];
						console.log(res.data[0].customer_item_num);
						var a = res.data[0].customer_item_num.substring(0,4);
						var b = res.data[0].customer_item_num.substring(4,8);
						var c = res.data[0].customer_item_num.substring(8,12);
						this.a = a;
						this.b = b;
						this.c = c;
						this.codeShow = true;
					}
				})
			},
			getType() {
				this.$get('customer_item_hexiao_flag.ashx', {
					customer_item_id: this.item_id,
				}, (res) => {
					if (res.data == 4) {
						uni.navigateTo({
							url:'/pages/comment/comment?id='+this.item_id
						})
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background: #2d74fe;
	}

	.main {
		padding-top: 76rpx;
	}

	.topArea {
		width: 670rpx;
		height: 698rpx;
		margin: 76rpx auto 0;
		margin-top: 0;
		background: #fff;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}

	.topArea_tit {
		font-size: 40rpx;
		color: #333;
		padding-top: 85rpx;
		text-align: center;
		font-weight: bold;
	}

	.codeArea {
		width: 360rpx;
		height: 360rpx;
		background: #e9e8e8;
		margin: 80rpx auto 0;
	}

	.codeNum {
		font-size: 36rpx;
		color: #333;
		text-align: center;
		font-weight: bold;
		margin: 30rpx auto 0;
		width: 300rpx;
	}
	.codeNum text {
		font-size: 40rpx;
		font-weight: bold;
		margin: 0 10rpx;
	}

	.middleArea {
		width: 670rpx;
		height: 178rpx;
		background: url(../../static/my/bottomArea.png) no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.kf_key {
		font-size: 30rpx;
		color: #333;
	}

	.kf_value {
		font-size: 24rpx;
		color: #333;
	}

	.middleRight image {
		width: 58rpx;
		height: 58rpx;
	}

	.middleLeft,
	.middleRight {
		margin-top: 40rpx;
	}

	.bottomArea {
		width: 670rpx;
		height: 100rpx;
		border-radius: 10rpx;
		background: #fff;
		margin: 27rpx auto 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
		box-sizing: border-box;
		font-weight: 500;
	}
</style>
